<%@ Page Language="C#" MasterPageFile="~/Labs.master" AutoEventWireup="True" 
    CodeBehind="panelextfunctionality.aspx.cs" 
    Inherits="SharpPieces.DemoApp.PanelExtenderFunctionality" 
%>

<asp:Content ID="Content1" ContentPlaceHolderID="headPlaceHolder" runat="server">
    <script type="text/javascript" src="/js/shadedborder.js"></script>
    <style type="text/css">
        .panelTitle { padding:7px; color:#fff; }
        .panelContent { padding:5px 10px; color:#000; border-bottom:dashed 1px LightGray; }
        .panelContentLast { padding:5px 10px; color:#000; }
        .padded { padding:10px; }
    </style>
    <title>SharpPieces - PanelExtender Functionality - Live Demo</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="descriptionPlaceholder" runat="server">
    <h1>PanelExtender Functionality</h1>
    <p>Upcoming control in SharpPieces toolbox.</p>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="demoPlaceholder" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <%--first example--%>

    <asp:Panel ID="Panel1" runat="server" Width="350px" Height="150px">
        <asp:Panel ID="Panel2" runat="server" Width="350px" Height="30px">
            <div class="panelTitle">Drag-dropable div construct</div>
        </asp:Panel>
        <asp:Panel ID="Panel3" runat="server" Width="350px" Height="120px">
            <div class="panelContent">Enumeration1 in div with round bottom</div>
            <div class="panelContent">Enumeration2 in div with round bottom</div>
            <div class="panelContent">Enumeration3 in div with round bottom</div>
            <div class="panelContentLast">Enumeration4 in div with round bottom</div>
        </asp:Panel>
    </asp:Panel>
    
    <piece:PanelExtender ID="PanelExtender1" runat="server" TargetControlID="Panel1">
        <JQueryUI Enabled="true" DragDropable="true" />
    </piece:PanelExtender>
    <piece:PanelExtender ID="PanelExtender2" runat="server" TargetControlID="Panel2">
        <ShadedBorder Edges="All" BorderColor="LightGray" BorderWidth="1" CornerLength="6" 
            Enabled="True" InnerColor="#93A2B8" ShadowColor="White" />
    </piece:PanelExtender>
    <piece:PanelExtender ID="PanelExtender3" runat="server" TargetControlID="Panel3">
        <ShadedBorder BorderColor="LightGray" BorderWidth="1" CornerLength="6" Enabled="True" 
            InnerColor="White" ShadowColor="White" Edges="All" ShadowWidth="0" />
    </piece:PanelExtender>
    
    <br />
    <br />
    
    <%--second example--%>
    
    <asp:Panel ID="Panel4" runat="server" Width="240px" Height="70px">
        <div class="padded">
            <table height="40px">
                <tr valign="middle">
                    <td valign="middle"><img src="App_Themes/loading.gif" alt="Loading" /> </td>
                    <td valign="middle">Round, shadowed div</td>
                </tr>
            </table>
        </div>
    </asp:Panel>
    
    <piece:PanelExtender ID="PanelExtender4" runat="server" TargetControlID="Panel4">
        <ShadedBorder BorderColor="DimGray" BorderWidth="1" CornerLength="8" Enabled="True" 
            InnerColor="White" ShadowColor="Gray" Edges="All" ShadowWidth="16" />
    </piece:PanelExtender>
    
    
</asp:Content>
